<template>
  <div class="goods">
    <div class="menu-wrapper" ref="menuwrapper">
      <ul>
        <li
          v-for="(item,index) in goods"
          :key="index"
          class="item-menu"
        >
         <span class="text border-bottom">
            <span class="icon"
                  v-show="item.type > 0"
                  :class="iconClassMap[item.type]"
                  :iconType="item.type"
            ></span>{{item.name}}
         </span>

        </li>
      </ul>
    </div>
    <div class="foods-wrapper" ref="foodswrapper">
      <ul>
        <li
          v-for="(item,index) of goods"
          class="food-list"
          :key="index"
        >
          <h1 class="title">{{item.name}}</h1>
          <ul>
            <li v-for="(food,index) of item.foods"
                class="food-item border-bottom"
                :key="index"
                @click="selectFood(food)"
            >
              <div class="icon">
                <img :src="food.icon" width="57" height="57">
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="description">{{food.description}}</p>
                <span class="count">月售{{food.sellCount}}份</span>
                <span class="count">好评率{{food.rating}}%</span>
                <div class="price">
                  <span class="new">￥{{food.price}}</span>
                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>
                <div class="cartcontrol-wrapper">
                  <cart-control :food="food"></cart-control>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <shop-cart :seller="seller" :select-foods="selectFoods"></shop-cart>
    <food :food="selectedFood" ref="food"></food>
  </div>
</template>

<script>
import axios from 'axios'
import Bscroll from 'better-scroll'
import ShopCart from '../shopcart/ShopCart'
import CartControl from '../cartcontrol/CartControl'
import Food from '../food/Food'
export default {
  name: 'Goods',
  data () {
    return {
      seller: {},
      goods: [],
      food: {},
      selectedFood: {}
    }
  },
  components: {
    ShopCart,
    CartControl,
    Food
  },
  methods: {
    selectFood (food) {
      this.selectedFood = food
      this.$refs.food.show()
    }
  },
  created () {
    this.iconClassMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

    axios.get('/static/mock/data.json').then((res) => {
      this.goods = res.data.goods
      this.seller = res.data.seller
      this.food = res.data.food
      // console.log(this.goods)
    })
  },
  computed: {
    selectFoods () {
      let foods = []
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food)
          }
        })
      })
      return foods
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.foodswrapper, {
      click: true
    })
    this.scroll = new Bscroll(this.$refs.menuwrapper)
  }
}
</script>

<style lang="stylus" scoped>
  .goods
    display flex
    position absolute
    width 100%
    top 174px
    bottom 46px
    overflow hidden
    .menu-wrapper
      flex 0 0 80px
      width 80px
      background #f3f5f7
    .item-menu
      width 56px
      height 54px
      line-height 14px
      display table
      padding 0 12px
      .icon
        display inline-block
        margin-right 2px
        width 12px
        height 12px
        vertical-align top
        background-size 100%
        &.decrease
          background url("../../../resource/img/decrease_3@2x.png") no-repeat
          width 12px
          height 12px
          background-size 12px 12px
        &.discount
          background url("../../../resource/img/discount_3@2x.png") no-repeat
          width 12px
          height 12px
          background-size 12px 12px
        &.special
          background url("../../../resource/img/special_3@2x.png") no-repeat
          width 12px
          height 12px
          background-size 12px 12px
        &.invoice
          background url("../../../resource/img/invoice_3@2x.png") no-repeat
          width 12px
          height 12px
          background-size 12px 12px
        &.guarantee
          background url("../../../resource/img/guarantee_3@2x.png") no-repeat
          width 12px
          height 12px
          background-size 12px 12px
      .text
        display table-cell
        width 56px
        font-size 12px
        /*color rgb(240,20,20)*/
        vertical-align middle
    .foods-wrapper
      flex 1
      .title
        width 100%
        height 26px
        line-height 26px
        background #f3f5f7
        padding-left 14px
        font-size 12px
        color rgb(147,153,159)
        border-left 2px solid #d9dde1
      .food-item
        display flex
        margin 18px
        padding-bottom 18px
        &:last-child
          border-bottom none
        .icon
          flex 0 0 57px
          margin-right 10px
        .content
          flex 1
          .name
            margin-top 2px
            font-size 14px
            height 14px
            line-height 14px
            color rgb(7,17,27)
          .description
            margin 8px 0
            font-size 10px
            line-height 12px
            color rgb(147,153,159)
          .count
            margin-right 12px
            font-size 10px
            line-height 10px
            color rgb(147,153,159)
          .price
            line-height 24px
            font-weight 700
            .new
              font-size 14px
              margin-right 8px
              color red
            .old
              text-decoration line-through
              font-size 10px
              color rgb(147,153,159)
          .cartcontrol-wrapper
            position absolute
            right 0
            bottom 12px

</style>
